<template>
  <div class="resources-container">
    <!-- 顶部导航栏 -->
    <header class="resources-header">
      <div class="header-content">
        <div class="home-icon" @click="goToHome" title="返回主页">
          <i class="fas fa-home"></i>
        </div>
        <div class="logo">
          <i class="fas fa-bookmark"></i>
          <span>资源收藏</span>
        </div>
        <div class="search-container">
          <i class="fas fa-search"></i>
          <input 
            type="text" 
            placeholder="搜索资源..." 
            v-model="searchQuery"
            @input="filterResources"
          >
        </div>
        <button class="new-resource-btn" @click="openEditor">
          <i class="fas fa-plus"></i> 添加资源
        </button>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="resources-main">
      <section class="hero">
        <h1>优质资源收藏</h1>
        <p>整理收集各类优质学习资源、工具网站和实用链接，方便随时查阅</p>
      </section>
      
      <!-- 分类导航 -->
      <div class="categories">
        <button 
          v-for="category in categories" 
          :key="category.id"
          :class="['category-btn', { active: selectedCategory === category.id }]"
          @click="selectCategory(category.id)"
        >
          {{ category.name }}
        </button>
      </div>
      
      <!-- 资源列表 -->
      <div class="content">
        <div v-if="filteredResources.length === 0" class="empty-state">
          <i class="fas fa-bookmark"></i>
          <h3>暂无收藏资源</h3>
          <p>当前分类和搜索条件下没有找到匹配的资源，点击"添加资源"开始收藏</p>
        </div>
        
        <div 
          v-for="resource in filteredResources" 
          :key="resource.id" 
          class="resource-card"
        >
          <div class="card-image" :style="{ background: resource.bgColor }">
            <i :class="resource.icon"></i>
          </div>
          <div class="card-content">
            <div class="card-header">
              <span class="card-category">{{ getCategoryName(resource.category) }}</span>
              <div class="card-actions">
                <button class="edit-btn" @click.stop="editResource(resource)">
                  <i class="fas fa-edit"></i>
                </button>
                <button class="delete-btn" @click.stop="deleteResource(resource.id)">
                  <i class="fas fa-trash"></i>
                </button>
              </div>
            </div>
            <h3 class="card-title">
              <a :href="resource.url" target="_blank" rel="noopener noreferrer">{{ resource.title }}</a>
            </h3>
            <p class="card-excerpt">{{ resource.description }}</p>
            <div class="card-meta">
              <span><i class="fas fa-external-link-alt"></i> {{ formatUrl(resource.url) }}</span>
              <span><i class="far fa-calendar"></i> {{ formatDate(resource.addedDate) }}</span>
            </div>
            <div class="card-tags">
              <span v-for="tag in resource.tags" :key="tag" class="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 统计信息 -->
      <div class="stats">
        <div class="stat-card">
          <i class="fas fa-bookmark"></i>
          <div class="number">{{ resources.length }}</div>
          <div class="label">资源总数</div>
        </div>
        <div class="stat-card">
          <i class="fas fa-tags"></i>
          <div class="number">{{ categories.length }}</div>
          <div class="label">分类数量</div>
        </div>
        <div class="stat-card">
          <i class="fas fa-hashtag"></i>
          <div class="number">{{ totalTags }}</div>
          <div class="label">标签总数</div>
        </div>
      </div>
    </main>
    
    <!-- 资源编辑器模态框 -->
    <div v-if="showEditor" class="editor-modal">
      <div class="editor-container">
        <div class="editor-header">
          <h3>{{ editingResource ? '编辑资源' : '添加资源' }}</h3>
          <button class="close-btn" @click="closeEditor">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="editor-body">
          <div class="form-group">
            <label>资源标题</label>
            <input 
              type="text" 
              class="form-input" 
              v-model="currentResource.title" 
              placeholder="输入资源名称"
            >
          </div>
          <div class="form-group">
            <label>资源URL</label>
            <input 
              type="url" 
              class="form-input" 
              v-model="currentResource.url" 
              placeholder="https://example.com"
            >
          </div>
          <div class="form-group">
            <label>资源描述</label>
            <textarea 
              class="form-input" 
              v-model="currentResource.description" 
              placeholder="资源简要描述..."
              rows="3"
            ></textarea>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>分类</label>
              <select v-model="currentResource.category" class="form-input">
                <option v-for="category in categories" :key="category.id" :value="category.id">
                  {{ category.name }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label>图标</label>
              <select v-model="currentResource.icon" class="form-input">
                <option v-for="icon in availableIcons" :key="icon" :value="icon">
                  {{ icon.replace('fas fa-', '') }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label>标签 (用逗号分隔)</label>
            <input 
              type="text" 
              class="form-input" 
              v-model="tagInput" 
              placeholder="标签1, 标签2, 标签3"
              @keydown.enter="addTags"
            >
            <div class="tags-preview">
              <span v-for="tag in currentResource.tags" :key="tag" class="tag">
                {{ tag }} <i class="fas fa-times" @click="removeTag(tag)"></i>
              </span>
            </div>
          </div>
        </div>
        <div class="editor-footer">
          <button class="save-btn" @click="saveResource">
            <i class="fas fa-save"></i> 保存资源
          </button>
          <button class="cancel-btn" @click="closeEditor">
            取消
          </button>
        </div>
      </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="resources-footer">
      <p>© 2023 资源收藏 | 知识管理工具</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 导航功能
const goToHome = () => {
  router.push('/')
}

// 分类数据
const categories = ref([
  { id: 'all', name: '全部' },
  { id: 'frontend', name: '前端开发' },
  { id: 'backend', name: '后端技术' },
  { id: 'design', name: '设计资源' },
  { id: 'tools', name: '开发工具' },
  { id: 'learning', name: '学习平台' },
  { id: 'document', name: '文档手册' },
  { id: 'other', name: '其他资源' }
])

// 可用图标
const availableIcons = ref([
  'fas fa-globe',
  'fas fa-code',
  'fas fa-palette',
  'fas fa-book',
  'fas fa-tools',
  'fas fa-video',
  'fas fa-graduation-cap',
  'fas fa-server',
  'fas fa-mobile-alt',
  'fas fa-database'
])

// 当前选中的分类
const selectedCategory = ref('all')

// 搜索查询词
const searchQuery = ref('')

// 资源数据
const resources = ref([
  {
    id: 1,
    title: 'Vue 官方文档',
    description: 'Vue.js 的官方文档，包含API参考、教程和示例代码',
    url: 'https://vuejs.org/',
    category: 'frontend',
    addedDate: new Date('2023-01-15'),
    tags: ['vue', '前端框架', '文档'],
    icon: 'fas fa-book',
    bgColor: 'linear-gradient(120deg, #42b883, #35495e)'
  },
  {
    id: 2,
    title: 'MDN Web Docs',
    description: 'Mozilla开发者网络，Web开发最全面的学习资源',
    url: 'https://developer.mozilla.org/',
    category: 'document',
    addedDate: new Date('2022-11-20'),
    tags: ['文档', 'web开发', '参考'],
    icon: 'fas fa-globe',
    bgColor: 'linear-gradient(120deg, #83a6ff, #5c7cfa)'
  },
  {
    id: 3,
    title: 'CSS Tricks',
    description: 'CSS技巧和现代Web布局解决方案',
    url: 'https://css-tricks.com/',
    category: 'frontend',
    addedDate: new Date('2023-03-10'),
    tags: ['css', '前端', '设计'],
    icon: 'fas fa-palette',
    bgColor: 'linear-gradient(120deg, #ff6b6b, #f06595)'
  },
  {
    id: 4,
    title: 'GitHub',
    description: '全球最大的代码托管平台和开发者社区',
    url: 'https://github.com/',
    category: 'tools',
    addedDate: new Date('2022-09-05'),
    tags: ['代码托管', '协作', '开源'],
    icon: 'fab fa-github',
    bgColor: 'linear-gradient(120deg, #343a40, #212529)'
  },
  {
    id: 5,
    title: 'Stack Overflow',
    description: '程序员问答社区，解决各种开发问题',
    url: 'https://stackoverflow.com/',
    category: 'learning',
    addedDate: new Date('2023-02-18'),
    tags: ['问答', '问题解决', '社区'],
    icon: 'fas fa-question-circle',
    bgColor: 'linear-gradient(120deg, #fcc419, #fab005)'
  },
  {
    id: 6,
    title: 'Dribbble',
    description: '设计师创意作品展示平台，获取设计灵感',
    url: 'https://dribbble.com/',
    category: 'design',
    addedDate: new Date('2023-04-22'),
    tags: ['设计', '灵感', 'UI'],
    icon: 'fas fa-basketball-ball',
    bgColor: 'linear-gradient(120deg, #e64980, #d6336c)'
  }
])

// 编辑器状态
const showEditor = ref(false)
const editingResource = ref(null)
const currentResource = ref({
  id: null,
  title: '',
  description: '',
  url: '',
  category: 'frontend',
  tags: [],
  icon: 'fas fa-globe',
  addedDate: new Date()
})
const tagInput = ref('')

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.value.find(cat => cat.id === categoryId)
  return category ? category.name : '未知分类'
}

// 选择分类
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 格式化URL
const formatUrl = (url) => {
  try {
    const urlObj = new URL(url)
    return urlObj.hostname.replace('www.', '')
  } catch {
    return url.length > 30 ? url.slice(0, 30) + '...' : url
  }
}

// 计算总标签数
const totalTags = computed(() => {
  const allTags = resources.value.flatMap(resource => resource.tags)
  return new Set(allTags).size
})

// 过滤资源
const filteredResources = computed(() => {
  let result = resources.value
  
  // 按分类过滤
  if (selectedCategory.value !== 'all') {
    result = result.filter(resource => resource.category === selectedCategory.value)
  }
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(resource => 
      resource.title.toLowerCase().includes(query) || 
      resource.description.toLowerCase().includes(query) ||
      resource.tags.some(tag => tag.toLowerCase().includes(query)) ||
      resource.url.toLowerCase().includes(query)
    )
  }
  
  return result.sort((a, b) => new Date(b.addedDate) - new Date(a.addedDate))
})

// 打开编辑器
const openEditor = (resource = null) => {
  if (resource) {
    editingResource.value = resource.id
    currentResource.value = {
      ...resource,
      addedDate: new Date(resource.addedDate)
    }
  } else {
    editingResource.value = null
    currentResource.value = {
      id: null,
      title: '',
      description: '',
      url: '',
      category: 'frontend',
      tags: [],
      icon: 'fas fa-globe',
      addedDate: new Date()
    }
  }
  tagInput.value = ''
  showEditor.value = true
}

// 关闭编辑器
const closeEditor = () => {
  showEditor.value = false
}

// 添加标签
const addTags = () => {
  if (!tagInput.value.trim()) return
  
  const newTags = tagInput.value.split(',')
    .map(tag => tag.trim())
    .filter(tag => tag && !currentResource.value.tags.includes(tag))
  
  currentResource.value.tags = [...currentResource.value.tags, ...newTags]
  tagInput.value = ''
}

// 移除标签
const removeTag = (tag) => {
  currentResource.value.tags = currentResource.value.tags.filter(t => t !== tag)
}

// 保存资源
const saveResource = () => {
  if (!currentResource.value.title || !currentResource.value.url) {
    alert('请填写标题和URL')
    return
  }

  // 处理URL前缀
  if (!currentResource.value.url.startsWith('http')) {
    currentResource.value.url = 'https://' + currentResource.value.url
  }

  if (editingResource.value) {
    // 更新现有资源
    const index = resources.value.findIndex(r => r.id === editingResource.value)
    if (index !== -1) {
      resources.value[index] = {
        ...currentResource.value,
        bgColor: getRandomGradient()
      }
    }
  } else {
    // 创建新资源
    const newResource = {
      ...currentResource.value,
      id: Date.now(),
      bgColor: getRandomGradient()
    }
    resources.value.unshift(newResource)
  }
  
  closeEditor()
}

// 编辑资源
const editResource = (resource) => {
  openEditor(resource)
}

// 删除资源
const deleteResource = (id) => {
  if (confirm('确定要删除这个资源吗？')) {
    resources.value = resources.value.filter(resource => resource.id !== id)
  }
}

// 获取随机渐变背景
const getRandomGradient = () => {
  const gradients = [
    'linear-gradient(120deg, #748ffc, #5c7cfa)',
    'linear-gradient(120deg, #63e6be, #20c997)',
    'linear-gradient(120deg, #ffa94d, #ff922b)',
    'linear-gradient(120deg, #f783ac, #f06595)',
    'linear-gradient(120deg, #9775fa, #845ef7)',
    'linear-gradient(120deg, #66d9e8, #3bc9db)',
    'linear-gradient(120deg, #ffd43b, #fcc419)',
    'linear-gradient(120deg, #a9e34b, #82c91e)'
  ]
  return gradients[Math.floor(Math.random() * gradients.length)]
}

// 初始化示例数据
onMounted(() => {
  // 可以从本地存储加载资源
  const savedResources = localStorage.getItem('saved-resources')
  if (savedResources) {
    resources.value = JSON.parse(savedResources)
  }
})
</script>

<style scoped>
.resources-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  color: #212529;
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
}

.resources-header {
  background: linear-gradient(120deg, #1971c2, #1c7ed6);
  color: white;
  padding: 20px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 20px;
}

.home-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.home-icon i {
  font-size: 1.8rem;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.home-icon:hover i {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.8rem;
  font-weight: 700;
  flex: 1;
}

.logo i {
  color: #4dabf7;
  background: white;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.search-container {
  position: relative;
  width: 40%;
  max-width: 400px;
}

.search-container input {
  width: 100%;
  padding: 12px 20px;
  padding-left: 50px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.search-container input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(25, 113, 194, 0.3);
}

.search-container i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 1.2rem;
}

.new-resource-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 50px;
  background: white;
  color: #1971c2;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.new-resource-btn:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
}

.resources-main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.hero {
  text-align: center;
  padding: 60px 0 40px;
}

.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 20px;
  background: linear-gradient(to right, #1971c2, #1c7ed6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 30px;
  color: #6c757d;
}

.categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 30px 0;
}

.category-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 50px;
  background: white;
  color: #6c757d;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.category-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.category-btn.active {
  background: linear-gradient(to right, #1971c2, #1c7ed6);
  color: white;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.resource-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.card-image {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.5rem;
}

.card-content {
  padding: 25px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-actions {
  display: flex;
  gap: 8px;
}

.edit-btn, .delete-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn {
  background: #fcc419;
  color: #212529;
}

.edit-btn:hover {
  background: #fab005;
}

.delete-btn {
  background: #ff6b6b;
  color: white;
}

.delete-btn:hover {
  background: #fa5252;
}

.card-category {
  display: inline-block;
  background: #e7f5ff;
  color: #1971c2;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
}

.card-title {
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: #212529;
}

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-title a:hover {
  color: #1c7ed6;
  text-decoration: underline;
}

.card-excerpt {
  color: #6c757d;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: #f1f3f5;
  color: #495057;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.8rem;
}

.tag i.fa-times {
  margin-left: 4px;
  cursor: pointer;
  font-size: 0.7rem;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
}

.empty-state i {
  font-size: 4rem;
  color: #e9ecef;
  margin-bottom: 20px;
}

.empty-state h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #6c757d;
}

.empty-state p {
  color: #6c757d;
  max-width: 500px;
  margin: 0 auto;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-width: 200px;
}

.stat-card i {
  font-size: 2.5rem;
  color: #1971c2;
  margin-bottom: 15px;
}

.stat-card .number {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1c7ed6;
  margin-bottom: 5px;
}

.stat-card .label {
  color: #6c757d;
  font-size: 1rem;
}

/* 编辑器模态框 */
.editor-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.editor-container {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.editor-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-header h3 {
  margin: 0;
  color: #212529;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: #212529;
  transform: rotate(90deg);
}

.editor-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-row .form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #495057;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
}

.form-input:focus {
  outline: none;
  border-color: #1c7ed6;
  box-shadow: 0 0 0 3px rgba(28, 126, 214, 0.2);
}

.tags-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tags-preview .tag {
  display: inline-flex;
  align-items: center;
}

.editor-footer {
  padding: 15px 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.save-btn, .cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-btn {
  background: #1971c2;
  color: white;
}

.save-btn:hover {
  background: #1c7ed6;
}

.cancel-btn {
  background: #f1f3f5;
  color: #212529;
}

.cancel-btn:hover {
  background: #e9ecef;
}

.resources-footer {
  text-align: center;
  padding: 30px 0;
  margin-top: 60px;
  color: #6c757d;
  border-top: 1px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-wrap: wrap;
  }
  
  .logo {
    order: 1;
    flex: 100%;
    justify-content: center;
    margin-bottom: 15px;
  }
  
  .search-container {
    order: 3;
    width: 100%;
    margin-top: 15px;
  }
  
  .new-resource-btn {
    order: 2;
  }
  
  .hero h1 {
    font-size: 2.2rem;
  }
  
  .content {
    grid-template-columns: 1fr;
  }
  
  .stat-card {
    min-width: 150px;
  }
  
  .editor-container {
    width: 95%;
  }
  
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}
</style>